<template>
  <div
    @mousewheel.stop="mousewheelStop"
    :style="
      props.checkHeight ? { height: props.width + 'px', justifyContent: 'center' } : { maxHeight: props.width + 'px' }
    "
    class="unit-exbit-null-remarks-info"
    @mouseup="endDrag()"
    @mouseleave="handleMouseLeave"
  >
    <div
      :scrollbar-width="0"
      :id="'info-remarks-byId' + props.byid"
      ref="unitInfo"
      class="unit-exbi-remarks-info-remarks scroll-hieed"
      :class="{ 'unit-exbi-remarks-info-remarks-no': !isScrollType }"
      @mousewheel="handlWheel"
    >
      <slot name="solidBorderExcon"></slot>
    </div>
    <div class="solid-box-parent" :style="{ width: props.width + 'px' }" v-if="isScrollType">
      <div
        class="solid-box"
        :style="{ width: props.width + 'px' }"
        ref="track"
        @mousedown="startDrag($event)"
        @mousemove="draggings($event)"
        @mouseup="endDrag()"
      >
        <div class="solid-border">
          <slot name="solidBorderExbar"></slot>
        </div>

        <div
          :style="{
            left:
              knobPosition < 10
                ? 0 + 'px'
                : knobPosition > props.width - topNmuber / 2
                ? props.width - topNmuber / 2 + 'px'
                : knobPosition + 'px',
          }"
          ref="knob"
          class="templatestyle1-scroll-box-tumb"
          :class="{
            'templatestyle1-scroll-box-tumb-1': knobPosition >= props.width - 25,
          }"
        >
          <div class="shadow-box"></div>

          <img v-if="props.scrollSrc" :src="props.scrollSrc" alt="" />
          <div v-else class="scrollBar"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  name: 'ScrollBoxCom',
});
</script>

<script setup lang="ts">
import { getTextHtml } from '@/utils/minxin';
import { ref, watch, onMounted, nextTick, onUnmounted, onDeactivated, defineComponent } from 'vue';
import { useProjectStore } from '@/store';
const topNmuber = ref(30);
topNmuber.value = (document.documentElement.clientHeight / 900) * 32;
const store = useProjectStore();
const isScrollType = ref(false);
const track = ref(null); // 拖动轨道
const knob = ref(null); // 拖动手柄
const knobPosition = ref(0); // 手柄位置
const dragging = ref(false); // 是否拖动中
const per = ref(0);
const timer = ref(null);
const unitInfo = ref(null);
const modelShow = ref(false); //
const props = defineProps({
  remarks: {
    type: String,
  },
  byid: {
    type: Number,
  },
  width: {
    type: Number,
    defalt: 260,
  },
  scrollSrc: {
    type: String,
  },
  color: {
    type: String,
    defalt: 'rgba(50, 43, 37, 1)',
  },
  topFlag: {
    type: Boolean,
    default: false,
  },
  checkHeight: {
    type: Boolean,
    default: false,
  },
});

// 拖动手柄滚动内容
const moveContent = () => {
  var container = document.getElementById('info-remarks-byId' + props.byid); // 滚动容器
  var scrollPercent = knobPosition.value / props.width; // 需要滚动到的百分比
  var scrollWidth = container.scrollWidth; //总滚动高度
  var clientWidth = container.clientWidth; //滚动容器高度
  container.scrollLeft = (scrollWidth - clientWidth) * scrollPercent; //设置滚动位置
};

const startDrag = (event: any) => {
  if (!isScrollType.value) {
    return;
  }
  dragging.value = true;
  let arrs = event.clientX - track.value.getBoundingClientRect().left;
  if (arrs >= props.width) {
    knobPosition.value = arrs;
  } else {
    knobPosition.value = arrs;
  }
  moveContent();
};

// 拖动时更新手柄位置
const draggings = (event: any) => {
  if (!isScrollType.value) {
    return;
  }
  if (!dragging.value) return;
  const trackLeft = track.value.getBoundingClientRect().left;
  // console.log(trackLeft);
  const trackWidth = props.width;
  // console.log(trackWidth);
  const y = event.clientX - trackLeft;
  let arrs = Math.min(trackWidth, Math.max(0, y));
  if (arrs > props.width) {
    knobPosition.value = arrs;
  } else {
    knobPosition.value = arrs;
  }
  moveContent();
};

// 结束拖动时更新状态
const endDrag = () => {
  dragging.value = false;
};
const handleMouseLeave = () => {
  dragging.value = false;
};
const isScrollBox = (element: any) => {
  // console.log(element.scrollHeight > element.clientHeight);
  // alert(element.scrollHeight > props.width);
  return element.scrollWidth > element.clientWidth;
};
const initScroll = () => {
  var container = document.getElementById('info-remarks-byId' + props.byid); // 滚动容器
  if (isScrollBox(container)) {
    isScrollType.value = true;
  } else {
    isScrollType.value = false;
    // console.log('滚动盒子开启禁止滚动');
  }
};
const initScrollBox = () => {
  if (!isScrollType.value) {
    return;
  }
  var container = document.getElementById('info-remarks-byId' + props.byid); // 滚动容器
  container.addEventListener('scroll', function () {
    var scrollLeft = container.scrollLeft;
    var scrollWidth = container.scrollWidth;
    var width = container.clientWidth;

    var scrolled = (scrollLeft / (scrollWidth - width)) * 100;
    knobPosition.value = (props.width * scrolled) / 100;
  });
};
const mousewheelStop = (event: any) => {
  // event.preventDefault(); // 阻止事件的默认行为
};

// 鼠标横向滚动事件
const handlWheel = (event: any) => {
  const delta = event.wheelDelta || -event.detail;
  unitInfo.value.scrollLeft -= delta;
  event.preventDefault();
};

// 滚动到顶部
const top = () => {
  var container = document.getElementById('info-remarks-byId' + props.byid); // 滚动容器
  container.scrollTo({
    left: 0,
    behavior: 'smooth',
  });
};

onMounted(() => {
  // setTimeout(() => {
  //   initScroll();
  //   initScrollBox();
  // }, 300);
  // setTimeout(() => {
  //   initScroll();
  //   initScrollBox();
  // }, 3000);
  // setTimeout(() => {
  //   initScroll();
  //   initScrollBox();
  // }, 8000);
});

onUnmounted(() => {
  clearInterval(timer.value);
});
timer.value = setInterval(() => {
  initScroll();
  initScrollBox();
}, 500);
onDeactivated(() => {
  clearInterval(timer.value);
  knobPosition.value = 0;
});
watch(
  () => props.topFlag,
  () => {
    nextTick(() => {
      // top();
    });
  },
  { deep: true },
);
</script>

<style scoped lang="less">
.unit-exbit-null-remarks-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 99;
  width: 100%;
}
.unit-exbi-remarks-info-remarks {
  display: flex;
  // flex-direction: column;
  // flex: 1;
  overflow: auto;
  font-size: 16px;
  font-weight: 400;
  width: 100%;

  font-family: PingFang SC, Microsoft YaHei, Arial Regular;
  line-height: 32px;
  scrollbar-width: none;
  :deep(p) {
    font-family: PingFang SC, Microsoft YaHei, Arial Regular;
    margin-bottom: 20px;
    text-indent: 2em;
    text-align: justify;
    line-height: 32px;
  }
  :deep(p:last-of-type) {
    margin-bottom: 0px !important;
  }
  // span {
  //   font-family: PingFang SC, Microsoft YaHei, Arial Regular;
  //   text-indent: 2em;
  //   font-size: 18px;
  //   font-weight: 500;
  //   color: #ba5656;
  //   font-family: SourceHanSerifCN-Medium;
  //   line-height: 30px;
  //   margin-bottom: 24px;
  // }
}
.unit-exbi-remarks-info-remarks-no {
  width: 100%;
}
.unit-exbi-remarks-info-remarks::-webkit-scrollbar {
  display: none !important;
}
.unit-exbi-remarks-info-remarks1 {
  color: #927560 !important;
}
.solid-box {
  cursor: pointer;
  position: relative;
  width: 32px;
}
.unit-exbi-remarks-info-remarks::-webkit-scrollbar {
  display: none !important;
}
.templatestyle1-scroll-box-tumb {
  display: flex;
  cursor: pointer;
  position: absolute;
  position: relative;
  z-index: 60;
  width: 40px;
  height: 40px;
  left: 9px;
  .shadow-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    z-index: 30;
    transform: scale(1.4);
  }
  img {
    width: 40px;
    height: 40px;
    margin-top: -6px;
    -webkit-user-select: none; /* 禁用 iOS 上的选择功能 */
    -moz-user-select: none; /* 禁用 Firefox 上的选择功能 */
    -ms-user-select: none; /* 禁用 IE/Edge 上的选择功能 */
    user-select: none; /* 标准语法 */
  }
}
.templatestyle1-scroll-box-tumb-1 {
  justify-content: flex-end;
}
.solid-border {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 13px;
  width: 100%;
  height: 32px;
}
.solid-box-parent {
  display: flex;
  justify-content: center;
  position: relative;
  top: 0;
  right: 0;
  width: 40px;
  margin-top: 24px;
}
.scroll-hieed::-webkit-scrollbar {
  width: 0px;
  display: none !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scroll-hieed::-webkit-scrollbar-button {
  display: none;
}
::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}
.scrollBar {
  width: 100%;
  height: 4px;
  background: #ffdc76;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15);
  border-radius: 2px;
}
</style>
